$(function() {
    //获取本地存储中的内容
    var arr = JSON.parse(localStorage.getItem("aaa")) || [];
    //取出来以后就把所有的value.isChecked设置为false
    arr.forEach(value => {
            value.isChecked = false;
        })
        //获取元素
        //全选勾选框
    var $allCheck = $("#allCheck");
    var $tbody = $("#tbody");
    //结算按钮
    var $bill = $("#bill");

    var $allCount = $("#allCount");

    function render() {
        // 根据本地存储中的数据渲染$tbody的内容
        //映射到一个新数组中
        var html = arr.map(value => {
            return `
                <tr>
                <td><input data-goods-id="${value.goods_id}" type="checkbox" ${value.isChecked ? "checked" : ""}></td>
                <td>${value.cat_id}</td>
                <td>${value.goods_price}</td>
                <td>${value.num}</td>
                <td>${value.goods_name}</td>
                <td>
                    <div class="btn-group">
                        <button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown"
                            aria-haspopup="true" aria-expanded="false">
                            <span class="caret"></span>
                            <span class="sr-only">Toggle Dropdown</span>
                        </button>
                        <ul class="dropdown-menu" data-goods-id="${value.goods_id}">
                            <li class="increase"><a>增加</a></li>
                            <li class="decrease"><a>减少</a></li>
                            <li class="del" ><a>删除</a></li>
                        </ul>
                    </div>
                </td>
            </tr>
            `
        }).join("")

        //innerHTML
        $tbody.html(html)
    }
    render();

    //点击全选功能
    $allCheck.click(function() {
        let isChecked = $(this).is(":checked");
        //修改isChecked属性
        arr.forEach(value => {
            value.isChecked = isChecked;
        })
        render();
        compute();
    })

    //删除数组中的数据重新渲染，使用委托模式
    //第一个参数是事件类型，第二个是触发元素
    $tbody.on("click", ".del", function() {
        //获取点击到的这个id
        var id = $(this).parent().data("goods-id");
        //删除数组中对应的数据
        //根据id找到它在数组中的哪个位置
        var idx = arr.findIndex(value => {
            return +value.goods_id === id;
        })
        console.log(idx)
            // 再splice,从idx开始删除，删除1个，不添加
        arr.splice(idx, 1);
        //再将内容放回本地存储
        localStorage.setItem("aaa", JSON.stringify(arr));
        render();
        //调用计算函数
        compute();
    })

    //增加按钮，也使用委托模式
    $tbody.on("click", ".increase", function() {
        //获取点击到的这个id
        var id = $(this).parent().data("goods-id");
        //根据id找到它在数组中的哪个位置
        var goods = arr.find(value => {
            return +value.goods_id === id;
        })

        //数量+1
        goods.num++;
        //渲染到页面
        render();
        //调用计算函数
        compute();
        //再将内容放回本地存储
        localStorage.setItem("aaa", JSON.stringify(arr));
    })

    //减少按钮，也使用委托模式
    $tbody.on("click", ".decrease", function() {
        //获取点击到的这个id
        var id = $(this).parent().data("goods-id");
        //根据id找到它
        var goods = arr.find(value => {
            return +value.goods_id === id;
        })

        //数量-1
        goods.num--;
        //这里减到0之后多点几次再点击增加的时候有bug
        if (goods.num < 0) {
            good.num = 0;
            // arr.splice(goods, 1);
        }
        //渲染到页面
        render();
        //调用计算函数
        compute();
        //再将内容放回本地存储
        localStorage.setItem("aaa", JSON.stringify(arr));
    })

    //单选按钮
    $tbody.on("click", "input", function() {
        //获取当前元素的选中状态,返回布尔值
        var isChecked = $(this).is(":checked");
        //更改当前选中的元素所对应的数据的isChecked属性
        //获取点击到的这个id
        var id = $(this).data("goods-id");
        //根据id找到它
        var goods = arr.find(value => {
                return +value.goods_id === id;
            })
            //更改它的选中属性
        goods.isChecked = isChecked;
        //计算价格
        compute();
        //当我单选按钮全部选中时，影响全选状态，改变全选按钮为勾选
        renderAllCheck();
    })

    //封装计算价格函数
    function compute() {
        var count = 0;
        for (var i = 0; i < arr.length; i++) {
            if (arr[i].isChecked) {
                count += arr[i].goods_price * arr[i].num;
            }
        }
        //给总计innerHTML 
        $allCount.html(count);
    }

    //定义全选按钮的渲染函数
    function renderAllCheck() {
        //循环arr数组，判定数组中的每一个对象是否都有isChecked为true
        var isAllChecked = arr.every(function(value) {
            return value.isChecked;
        })
        console.log(isAllChecked)
            //attr方法在操作input的checked时不如prop好用
            //attr是操作html属性的，prop是操作js属性的
            // $allCheck.prop("checked", isAllChecked)
        $allCheck[0].checked = isAllChecked;
    }
})